<template>
    <div class="hydropwer">
        <div class="top">
            <span>水电用量</span>
            <img style="margin-left: 10px;" src="../../assets/images/Combined Shape.png" alt="">
        </div>
        <div class="box">
            <div class="box_left">
                <p><el-icon style="font-size: 34px;color:aqua;margin-right:10px;margin-top:5px">
                        <RemoveFilled />
                    </el-icon>总用点亮72670</p>
            </div>
            <div class="box_right">
                <p><el-icon style="font-size: 34px;color:red;margin-right:10px;margin-top:5px">
                        <CirclePlusFilled />
                    </el-icon>总用水量69235</p>
            </div>
        </div>
        <div class="boxc">
            <div id="main1" style="width: 100%;height:100%"></div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
         barWidth: 24,
        series: [
            {
                data: [
                     140,
                    {
                        value: 200,
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    {
                        value: 240,
                        itemStyle: {
                            color: '#ccc'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: '#a98753'
                        }
                    },
                    200,
                     {
                        value: 240,
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: '#ccc'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: '#a98753'
                        }
                    },
                    
                ],
                type: 'bar'
            }
        ]
    };

    option && myChart.setOption(option);
})


</script>

<style scoped lang="scss">
.hydropwer {
    width: 100%;

    .top {
        width: 100%;
        height: 40px;
        background-image: url("../../assets/images/you.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #91a6ff;
        font-weight: bold;
        display: flex;
        align-items: center;
        font-size: 18px;

        span {
            text-indent: 30px;
        }
    }

    .box {
        width: 100%;
        height: 70px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        .box_left {
            height: 100%;
            width: 220px;
            background-image: url("../../assets/images/编组 40.png");
            background-size: 100% 100%;
        }

        .box_right {
            height: 100%;
            width: 220px;
            background-image: url("../../assets/images/编组 40.png");
            background-size: 100% 100%;
        }

        p {
            font-size: 22px;
            color: #fff;
            line-height: 70px;
        }
    }

    .boxc {
        width: 450px;
        height: 270px;
        background: rgba(255, 255, 255, 0.1);
        margin-top: 10px;
    }
}
</style>